<template>
  <div class="home">
    <header>
      <van-icon name="scan" color="white" size="30px" />
      <div class="sear">
        <van-icon name="search" size="25px" />
        <input type="text" placeholder="搜索商品" @focus="toSear()" />
      </div>
      <van-icon name="chat-o" color="white" size="30px" @click="notify()" />
    </header>

    <div class="ban">
      <div class="background"></div>
      <div class="pics">
        <!-- <ul>
          <li v-for="item in bannerList" :key="item.id">
            <img :src="item.url" alt />
          </li> -->
          <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
  <van-swipe-item v-for="item in bannerList" :key="item.id"><img :src="item.url" alt /></van-swipe-item>

</van-swipe>
        <!-- </ul> -->
      </div>
    </div>

    <!-- //抢购 -->
    <div class="snap" @click="toSnap()">
      <div class="snapHead">
        <h5>限时抢购</h5>
        <van-count-down>
          <template>
            <span class="block">{{ 59 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ 55 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ 3 }}</span>
          </template>
        </van-count-down>
        <span>
          <router-link tag="span" to="/snap">更多 ></router-link>
        </span>
      </div>

      <!-- 抢购列表 -->
      <ul class="snapItem">
        <li v-for="item in snapList.slice(0,3)" :key="item.id">
          <img :src="item.picture" alt />
          <p>${{item.price}}</p>仅剩99件
        </li>
      
      </ul>
    </div>

    <!--排行-->
    <div class="Rank" @click="toRank()">
      <div class="rankHead">
        <h5>排行榜</h5>
        <span>
          <router-link tag="span" to="/rank">更多 ></router-link>
        </span>
      </div>
      <div class="imgs">
        <img src="../../assets/img/sanp.jpg">
      </div>
      <ul>
        <li v-for="item in rankList.slice(0,3)" :key="item.id" >
          <img :src="item.picture" alt />
          <p>{{item.shop}}</p>
          <span>${{item.price}}</span>
        </li>
      
      </ul>
    </div>

    <!--推荐-->
    <div class="recommend">
      <h5>为你推荐</h5>
      <ul>
        <li v-for="item in recomList" :key="item.id" @click="addCart(item.id)">
          <img :src="item.picture" alt />
          <p>{{item.shop}}</p>
          <span>{{item.price}}</span>
        </li>
      </ul>
    </div>
    <!-- <menus /> -->
    <div class="more" @click="getRecomList(pageNo++)">
      加载更多
    </div>
    
  </div>
</template>

<script>
import menus from "../../Layout/menu";
import Vue from "vue";
import { Icon } from "vant";
import { requestProductList, requestBanner ,requestCategory} from "../../api/home";
Vue.use(Icon);
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
import { CountDown } from "vant";
Vue.use(CountDown);
export default {
  data: function() {
    return {
      snapList: [],
      rankList: [],
      recomList: [],
      bannerList:[],
      pageNo:1
    };
  },
  components: {
    menus
  },
  methods: {
    toSnap:function(){
      this.$router.push('/snap')
    },
    toRank:function(){
      this.$router.push('/rank')
    },
    addCart:function(id){
      this.$router.push({path:`/detail/${id}`})
    },
    notify: function() {
      this.$router.push("/notify");
    },
    toSear: function() {
      this.$router.push("/searching");
    },
    async getRecomList() {
      let res = await requestProductList(this.pageNo);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        // console.log(this.recomList);
         this.recomList=this.recomList.concat(resultInfo.list)
        //  console.log(this.recomList);

      if(this.recomList==null){
        this.recomList=[]
       
         console.log(this.recomList);
      }
        
        // this.recomList = resultInfo.list;
       
        this.$store.dispatch('SETRECOM',this.recomList)
      }
    },
    async getBanner(){
        let res=await requestBanner()
        let data = res.data;
      let { resultCode, resultInfo } = data;
     if(resultCode==1){
         this.bannerList=resultInfo.list
     }
    },
    async getRankList(){
        let res=await requestCategory(1)
         let data = res.data;
      let { resultCode, resultInfo } = data;
        this.rankList=resultInfo.list
        this.$store.dispatch('SETRANK',this.rankList)
        
    },
    async getSnapList(){
        let res=await requestCategory(5)
 let data = res.data;
      let { resultCode, resultInfo } = data;
        this.snapList=resultInfo.list
        this.$store.dispatch('SETSNAP',this.snapList)
        // console.log(this.$store.getters.getSnap);
    }
  },
  created() {
    this.getRecomList();
    this.getBanner(),
    this.getRankList(),
    this.getSnapList()
  }
};
</script>

<style lang="scss" scoped>
.more{
  width: 150px;
  height: 45px;
  line-height: 45px;
  color: white;
  margin: auto;
  border-radius: 20px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 70px;
  margin-top: 30px;
  background: #797979;
}
menus {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.125rem;
  background-color: #fff;
}
.home {
  background-color: #f2f2f2;
  width: 100%;
}
header {
  height: 4.0625rem;
  width: 100%;
  background-color: #ff0036;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sear {
  width: 16.25rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 5px;
  padding: 4px 0.9375rem;

  input {
    width: 12.8125rem;
    height: 1.625rem;
    border: none;
    text-indent: 5px;
    font-size: 1.125rem;
    float: right;
  }
}
.ban {
  height: 11.25rem;
  position: relative;
  background-color: #fff;
  .background {
    height: 7.5rem;
    background-color: #ff0036;
    z-index: -99;
    border-radius: 0px 1px 0px 6.3125rem;
  }
  .pics {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 3%;
    width: 94%;
    height: 10rem;
    border-radius: 0.3125rem;
    overflow: hidden;
   img {
          width: 100%;
          height: 100%;
          border-radius: 0.6rem;
        }
  }
}
.snap {
  height: 15rem;
  background-color: #fff;
  padding: 0.875rem;

  .snapHead {
    height: 26px;
    h5 {
      font-weight: 600;
      font-size: 18px;
      display: inline-block;
      float: left;
    }
    .van-count-down {
      float: left;
      margin-left: 10px;
    }
    span {
      float: right;
    }
  }
  .snapItem {
    margin-top: 0.875rem;
    display: flex;
    justify-content: space-between;
    li {
      width: 7.125rem;
      height: 10.625rem;
      text-align: center;
      color: #8c91a6;
      img {
        width: 7.125rem;
        height: 7.125rem;
      }
      p {
        color: #ee0a24;
        margin: 0.5rem 0px;
      }
    }
  }
}
.colon {
  display: inline-block;
  margin: 0 0.25rem;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 1.375rem;
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.3125rem;
}
.Rank {
  height: 24.375rem;
  padding: 0.75rem 0.9rem;
  background-color: #fff;
  margin-top: 1rem;
  .rankHead {
    height: 1.5rem;
    h5 {
      float: left;
      font-weight: 600;
      font-size: 1.1rem;
    }
    span {
      float: right;
      font-size: 1rem;
      color: #74716e;
    }
  }
  .imgs {
    margin-top: 0.75rem;
    height: 8.875rem;
    background-color: gainsboro;
    img{
      width: 100%;
      height: 100%;
    }
  }
  ul {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;

    li {
      width: 32%;
      height: 10.625rem;
      text-align: left;
      img {
        width: 100%;
        height: 74%;
      }
      p {
        font-size: 0.75rem;
        margin: 0.25rem;
      }
      span {
        color: #ee0a24;
        font-size: 0.85rem;
      }
    }
  }
}
.recommend {
  padding: 0.75rem 0rem;
  background-color: #fff;
  margin-top: 0.75rem;
  h5 {
    float: left;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.875rem;
    display: block;
    margin-left: 1rem;
  }
  ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 1.55rem;
    width: 100%;
    li {
      width: 11.3125rem;
      height: 14.875rem;

      font-size: 0.875rem;
      text-align: left;
      img {
        width: 11.3125rem;
        height: 10.3125rem;
      }
      p {
        margin: 0.625rem 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        color: #ee0a24;
      }
    }
  }
}
</style>